import { Header, Button, useMantineTheme } from '@mantine/core';

export function ResponsiveHeader() {
  const theme = useMantineTheme();
  return (
    <Header height={{ base: 60, md: 80 }} p="md" className="bg-blue-500 shadow-lg">
      <div className="container mx-auto flex justify-between items-center">
        <div className="text-white text-xl font-bold">My Personal Site</div>
        <div className="flex gap-3">
          <Button variant="outline" color="white" className="hidden md:flex">
            关于我
          </Button>
          <Button variant="outline" color="white" className="hidden md:flex">
            作品集
          </Button>
          <Button variant="filled" color="white" className="md:hidden">≡</Button>
        </div>
      </div>
    </Header>
  );
}
    